import React from 'react'
import { connect } from 'react-redux'
import {
  Header, Table, Checkbox, Grid, Image,
} from 'semantic-ui-react'
import { projectConfig as duck } from 'ducks'

const SelectType = ({type, change}) => (
  <Grid>
    <Grid.Column width={4} />
    <Grid.Column width={8}>
      <Header dividing content="选择一个标签的数据类型" />
      <Table basic="very">
        <Table.Body>
          <Table.Row style={{ height: '8em' }}>
            <Table.Cell collapsing>
              <Checkbox
                radio
                name="role"
                tabIndex="0"
                value="rectangle"
                checked={type === 'string'}
                onClick={() => change('string') }
              />
            </Table.Cell>
            <Table.Cell>
              <Header as="h4">
                <Image src="https://img.icons8.com/ultraviolet/2x/subtitles.png" />
                <Header.Content>
                  字符串类型
                  <Header.Subheader>通过一个字符串来描述该标签的值</Header.Subheader>
                </Header.Content>
              </Header>
            </Table.Cell>
          </Table.Row>
          <Table.Row style={{ height: '8em' }}>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Checkbox
                radio
                name="role"
                tabIndex="1"
                value="polygon"
                checked={type === 'enum'}
                onClick={() => change('enum') }
              />
            </Table.Cell>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Header as="h4">
                <Image src="https://img.icons8.com/color/2x/multiple-choice.png" />
                <Header.Content>
                  枚举类型
                  <Header.Subheader>
                    通过下拉菜单从预定义选项中选择一个作为标签的值
                  </Header.Subheader>
                </Header.Content>
              </Header>
            </Table.Cell>
          </Table.Row>
          <Table.Row style={{ height: '8em' }}>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Checkbox radio name="role" tabIndex="2" value="keyPoint" checked={type === 'number'} onClick={() => change('number') }/>
            </Table.Cell>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Header as="h4">
                <Image src="https://img.icons8.com/ultraviolet/2x/calendar-26.png" />
                <Header.Content>
                  数字类型
                  <Header.Subheader>
                    只允许输入一个数字来作为标签的值
                  </Header.Subheader>
                </Header.Content>
              </Header>
            </Table.Cell>
          </Table.Row>
          <Table.Row style={{ height: '8em' }}>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Checkbox radio name="role" tabIndex="2" value="tag" checked={type === 'bool'} onClick={() => change('bool') } />
            </Table.Cell>
            <Table.Cell style={{ borderTopWidth: '0px' }}>
              <Header as="h4">
                <Image src="https://img.icons8.com/color/2x/true-false.png" />
                <Header.Content>
                  布尔类型
                  <Header.Subheader>选择是或者否作为标签的值</Header.Subheader>
                </Header.Content>
              </Header>
            </Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </Grid.Column>
    <Grid.Column width={4} />
  </Grid>
)

const mapStateToProps = state => ({
  type: duck.selectors.newTagType(state),
})

const mapDispatchToProps = {
  change: duck.creators.actionSetNewTagType,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SelectType)
